<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签管理</title>
    <link href="../css/mems-index.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/tag-manage.css">
</head>
<body>


<!--header-->
<header id="header" class="header">
    <div class="header-info left"><i></i><a href="user-manage.html">系统配置</a>&nbsp;>&nbsp;标签管理</div>
    <div class="right-user right">
         <div class="clear t" >             <div id="headusername" class="role"></div>             <div class="icon"></div>         </div>
        <div class="head-down">
            <ul><li><a href="edit-pwd.html">修改密码</a></li><li><a onclick="loginOut()">退出系统</a></li></ul></div><div>
    </div>
    </div>
</header>
<!--menu-->
<aside id="aside" class="aside">
    <div class="logo">运营平台</div>
    <ul class="menu" id="asidemenu">
    </ul>
</aside>


<!--content-->
<div class="content">
    <div class="page-inner">
        <div class="item-header">
            <ul>
                <li class="tag-item active" data-type="1">兴趣点</li>
                <li class="tag-item" data-type="2">管理方式</li>
                <li class="tag-item" data-type="3" style="width: 200px;">目前正在使用的设备管理系统</li>
            </ul>
        </div>
        <div class="item-content">
            <div class="search-line">
                <div class="search-box">
                    <form action="javascript:;" id="search-user-form">
                        <input type="text" placeholder="搜索标签" id="tagName-text">
                        <div class="search-icon" id="search-icon"></div>
                    </form>
                </div>
                <div class="item-right">
                    共 <span class="tag-num"></span> 个标签
                </div>
            </div>
            <div class="add-tag-box">
                <button class="add-tag tag-btn add-btn-click" onclick="addBtnClick(this)">+ 标签</button>
                <div class="add-tag-line" style="display: none">
                    <input maxlength="12" type="text" class="add-tag-input display-middle" placeholder="标签名称">
                    <button class="tag-btn sure-btn display-middle add-sure-btn" onclick="addSureBtn(this)">确认</button>
                    <button class="tag-btn cancel-btn display-middle cancel-add-edit" onclick="cancelAddEdit(this)">取消</button>
                </div>
            </div>
            <div class="tag-content">

            </div>
        </div>
    </div>
</div>
<div class="user-mask" onclick="hideMode()"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/common.js"></script>
<script src="../js/user-tree.js"></script>
<script type="text/javascript">
    //角色限制
    var roleid = $.cookie('userrole');
    if(roleid == 0 || roleid ==2){
        alert('您无权查看！');
        location.href= 'mems-pro-list.html';
    }
    $('.tag-item').on('click', function(event) {
        var $obj = $(this);
        $obj.addClass('active').siblings().removeClass('active');
        $('#tagName-text').val('');
        getTag();
    });

    $('#search-icon').on('click', function() {
        $('.cancel-add-edit').click();
        getTag();
    });

    $('.add-sure-btn').on('click', function() {

    });

    function addSureBtn(obj, edit) {
        var $obj = $(obj);
        var tagValue = $obj.prev().val();
        var type = $('.tag-item.active').data('type');
        var url  = _ip+'/tags/insert';
        var $addTagbox = $('.add-tag-box');
        $('.error-msg').remove();
        if(edit) {
            var id = $obj.prev().data('id');
            var name= $obj.prev().val().replace(/(^\s*)|(\s*$)/g,"");
            url = _ip+'/tags/update';
            if(!name) {
                $addTagbox.prepend('<p class="error-msg">标签名字不能为空</p>');
                return false;
            }
            organizeAjaxPost(url, {id: id, name: name}, function(json) {
                if (json.success) {
                    $('.cancel-add-edit').click();
                    getTag();
                }
            })
        }
        else {
            if(!tagValue.replace(/(^\s*)|(\s*$)/g,"")) {
                $addTagbox.prepend('<p class="error-msg">标签名字不能为空</p>');
                return false;
            }
            //去重
            var isRepeatTagsName = false;
            var list = $('.tag-content').find('div.display-middle');
            for(var k = 0, kk = list.length; k < kk; k++){
                var _tagName = list.eq(k).find('span.tag-name').text();
                if(_tagName == tagValue){
                    isRepeatTagsName = true;
                }
            }
            if(isRepeatTagsName){
                $addTagbox.prepend('<p class="error-msg">标签名不能重复</p>');
                return false;
            }
            organizeAjaxGet(url, {name: tagValue, type: type }, 'tags_insert', function(json) {
                if (json.success) {
                    $('.cancel-add-edit').click();
                    getTag();
                }
            })
        }
    }

    function sureDelete(obj) {
        var $obj = $(obj);
        var url  = _ip+'/tags/delete';
        var id = $obj.closest('.tag-display').attr('id');
        organizeAjaxGet(url, {id: id }, 'tags_delete', function(json) {
            if (json.success) {
                $('.cancel-delete').click();
                getTag();
            }
        })
    }

    function addBtnClick(obj, edit) {
        var $obj = $(obj);
        $('.cancel-add-edit').click();
        $obj.css('display', 'none').next().css('display','block');
        if(edit) {
           $obj.closest('.tag-display').find('.add-tag-input').val($obj.find('.tag-name').text())
                   .data('id', $obj.closest('.tag-display').attr('id'));
        }
    }

    function cancelAddEdit(obj) {
        var $obj = $(obj);
        $('.error-msg').remove();
        $obj.closest('.add-tag-line').css('display', 'none').find('.add-tag-input').val('')
                .end().prev().css('display','block');
    }

    function hideMode() {
        $('.delete-alert').removeClass('show-alert');
        $('.user-mask').css('display','none');
        return false;
    }

    function deleteBtn (obj) {
        var $obj = $(obj);
        $obj.closest('.text-tag').find('.delete-alert').addClass('show-alert');
        $('.user-mask').css('display','block');
        return false;
    }

    function getTag() {
        var type = $('.tag-item.active').data('type');
        var search = $('#tagName-text').val();
        var url  = _ip+'/tags/select';
        organizeAjaxPost(url, {
            name: search ,
            type: type
        }, function(json) {
            if (json.success) {
                var $tagContent = $('.tag-content');
                $('.tag-num').text(json.data.length);
                $tagContent.html('');
                if (!json.data.length) {
                    return false;
                }
                for (var key in json.data) {
                    var $tagDisplay = $('<div class="display-middle tag-display" id='+ json.data[key].id +'></div>');
                    var $tooltipTop = $('<div class="tooltip top">' +
                            '<div class="tooltip-arrow"></div>' +
                            '<div class="tooltip-inner">点击编辑</div>' +
                            '</div>');
                    var $deleteAlert =  $('<div class="tooltip bottom delete-alert" onmouseover="tooltipOver(this)" onmouseout="tooltipOut(this)">' +
                            '<div class="tooltip-arrow"></div>' +
                            '<div class="tooltip-inner">' +
                            '<div class="tooltip-title">确认要删除该标签吗？</div>' +
                            '<div class="tooltip-describe">删除后已关联项目的标签也将删除。</div>' +
                            '<div class="tooltip-button"> ' +
                            '<a href="javascript:;" class="sure-delete" onclick="sureDelete(this); event.stopPropagation();">确认</a> ' +
                            '<a href="javascript:;" onclick="hideMode(this); event.stopPropagation();" class="cancel-delete">取消</a> ' +
                            '</div> ' +
                            '</div> ' +
                            '</div>');
                    var $text = $('<span class="display-middle tag-name">'+ json.data[key].name +'</span>');
                    var $deleteBtn = $('<span class="delete-btn display-middle" onclick="deleteBtn(this); event.stopPropagation();"><span>×</span></span>');
                    var $textTag = $('<div class="display-middle tag-btn text-tag" onclick="addBtnClick(this, 1)"></div>');
                    var addTagLine = $('<div class="add-tag-line" style="display: none">' +
                            '<input maxlength="12" type="text" class="add-tag-input display-middle" placeholder="标签名称">' +
                            '<button class="tag-btn sure-btn display-middle" onclick="addSureBtn(this, 1)">确认</button>' +
                            '<button class="tag-btn cancel-btn display-middle cancel-add-edit" onclick="cancelAddEdit(this)">取消</button>' +
                            '</div>');
                    $textTag.append($tooltipTop).append($deleteAlert).append($text).append($deleteBtn);
                    $tagDisplay.append($textTag).append(addTagLine);
                    $tagContent.append($tagDisplay);
                }
            }
        });
    }

    getTag();
</script>
</body>
</html>